<template>
  <div>
  <div class="titletopXX">
    <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
  </div>
  <van-tabs class="van_tab" @click="tabChange" v-model:active="activeName">
    <van-tab title="待办" name="待办"></van-tab>
    <van-tab title="已办" name="已办"></van-tab>
  </van-tabs>
  <div>
    <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
      <van-empty v-if="goodList.length == 0 && !error" image="search" description="未找到数据" />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
         :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="queryList"
        >
        <div class="ulbox">
          <div class="ul" v-for="(item, index) in goodList" :key="index">
            <div class="li">
              <div class="li_head">
                <div class="li_right">
                  <div @click="YYXX(item)">
                    <div class="TT" style="color: #36c2a8">
                      {{ item.detailList[0].destination }}
                    </div>
                    <div
                      style="
                        font-size: 16px;
                        margin: 5px 0px;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <span>出行时间：</span><span>{{ item.detailList[0].travelDate }}</span>
                    </div>
                    <div style="font-size: 16px; display: flex; justify-content: space-between">
                      <span>出行人员：</span
                      ><span>{{
                        item.detailList[0].convalesceAndEntouragesList
                          .map((item) => item.employeeName)
                          .join(",")
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
              <div class="li_foot">
                <div class="li_foot_left"></div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 13px;
                  "
                >
                  <div
                    v-if="!item.verification"
                    class="li_right_btn"
                    style="
                      color: #fff;
                      font-size: 16px;
                      background-color: #36c2a8;
                      border: 1px solid #36c2a8;
                    "
                    @click="YYXX(item)"
                  >
                    审批
                  </div>
                  <div
                    class="li_right_btn"
                    :class="item.orderEvaluateApproval.score == 1 ? 'btnChange' : ''"
                    v-else
                  >
                    <span>{{ item.orderEvaluateApproval.score == 1 ? "已通过" : "已驳回" }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
  </div>
</template>

<script>
import { queryConvalesceActivityBackList } from "@/api/realAssets/icsharedstation/LYDJ/index.js"
import { getServiceOrderAdminList } from "@/api/realAssets/icsharedstation/DD/index.js"
import { getpersonalInformation } from "../../../../common/RYXX"

export default {
  data() {
    return {
      title: "审批待办",
      pageSearchData: {
        pageNumber: 1,
        pageSize: 10,
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        postId: JSON.parse(getpersonalInformation()).postId,
        orderStatus: "0",
        orderTime: "",
        orderNumber: "",
        orderDescription: "notapproval",
        verification: ""
      },
      siteData: JSON.parse(localStorage.getItem("siteData")),
      goodList: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false, // 控制错误状态
      activeName: "待办"
    }
  },
  methods: {
    tabChange() {
      if (this.activeName == "待办") {
        this.title = "审批待办"
        this.pageSearchData.orderDescription = "notapproval"
        this.pageSearchData.verification = ""
      } else {
        this.title = "审批已办"
        this.pageSearchData.orderDescription = ""
        this.pageSearchData.verification = "approval"
      }
      this.onRefresh()
    },
    YYXX(item) {
      this.$router.push({
        path: "/HT/pages/LYDJ/LYSPDBdetail",
        query: {
          LYSPDB: encodeURIComponent(JSON.stringify(item))
        }
      })
    },
    queryList() {
      this.loading = true
      if (this.error) return // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.goodList = []
      }
      getServiceOrderAdminList(this.pageSearchData)
        .then((res) => {
          if (res.resultMessage != "SUCCESS") {
            this.goodList = []
            this.error = true // 显示错误提示
          } else if (res.data.length == 0) {
            this.goodList = []
            this.finished = true
          } else {
            let dataList = res.data
            this.goodList = [...this.goodList, ...dataList]
            console.log(this.goodList)
          }
          this.loading = false
          // 判断是否已加载完所有数据
          if (this.goodList.length == res.pageNum) {
            this.finished = true
          } else {
            this.pageSearchData.pageNumber++
          }
          this.refreshing = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onRefresh() {
      this.pageSearchData.pageNumber = 1
      this.pageSearchData.pageSize = 10
      this.finished = false
      this.error = false
      this.loading = true
      this.refreshing = true
      this.queryList()
    },
    retryLoad() {
      this.error = false
      this.loading = true
      this.queryList()
    },
    onClickLeft() {
      this.$router.back()
    }
  },
  mounted() {
    this.queryList()
  }
}
</script>

<style lang="less" scoped>
@import "../../../../static/css/index.less";
@import "../../../../pagesNew/QNY/qny.less";
.content {
  background-color: #f8fbff;
}
.TT {
  font-size: 16px;
  line-height: 15px;
  font-weight: 500;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.JJ {
  display: -webkit-box;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 2px;
  height: 45px;
  width: 100%;
  margin: 5px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #979797;
}
.li_right_btn {
  color: #808080;
  border-radius: 10px;
  border: 1px solid #808080;
  width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnChange {
  color: #36c2a8;
  border: 1px solid #36c2a8;
}
.van_tab {
  --van-tabs-bottom-bar-color: #36c2a8;
}
.titletopXX {
  height: 45px;
}
</style>
